<template>
  <!-- 公司搜索页面 -->
  <view class="main">
    <view class="top_tou">
      <view class="left_" @tap="fanLastPage">
        <image
          src="../../images/aliang/navigation.png"
          mode="aspectFill"
        ></image>
      </view>
      <view class="center_">公司名称</view>
      <view class="right_"></view>
    </view>
    <view class="xian"></view>
    <view class="content">
      <view class="seach">
        <input
          type="text"
          value=""
          v-model="guanjian"
          @input="onInput"
          placeholder="如: 青岛一起来往"
        />
        <image
          src="../../imges/shan-chu.png"
          mode="aspectFill"
          @tap="clean"
        ></image>
      </view>
      <!-- 无关键词展示 -->
      <view class="wu_Huo" v-if="data.length == 0 && you">
        <image src="../../imges/kong_s.png" mode="aspectFill"></image>
        <text>暂无关键字命中</text>
      </view>
      <view class="seach1" v-for="item in data">
        <view @tap="queren(item.orgName)" hover-class="none">
          <span>{{
            item.orgName.slice(
              0,
              item.orgName.toLowerCase().indexOf(guanjian.toLowerCase())
            )
          }}</span>
          <span style="color: #2a70fe">{{
            item.orgName.slice(
              item.orgName.toLowerCase().indexOf(guanjian.toLowerCase()),
              item.orgName.toLowerCase().indexOf(guanjian.toLowerCase()) +
                guanjian.length
            )
          }}</span>
          <span>{{
            item.orgName.substr(
              item.orgName.toLowerCase().indexOf(guanjian.toLowerCase()) +
                guanjian.length
            )
          }}</span>
        </view>
      </view>
    </view>
    <!-- 暂无关键字确认按钮 -->
    <view class="quedin">
      <view class="btn" @tap="queren(guanjian)">确定</view>
    </view>
  </view>
</template>

<script>
import request from "../../utils/request.js";
export default {
  data() {
    return {
      data: [],
      guanjian: "",
      you: false,
    };
  },
  onLoad(option) {
    if (option.company) {
      this.guanjian = option.company;
      uni.setStorageSync("gsName", option.company);
      this.sousuo(option.company);
    }
  },
  methods: {
    fanLastPage() {
      //返回上一页
      window.history.go(-1);
    },
    clean() {
      this.guanjian = "";
      if (this.guanjian == "") {
        this.data = [];
      }
    },
    onInput(e) {
      console.log(e.detail, this.guanjian);
      if (this.guanjian == "") {
        this.data = [];
        this.you = false;
      } else {
        this.sousuo(e.detail.value);
      }
    },
    queren(name) {
      if (name) {
        uni.setStorageSync("gsName", name);
        uni.navigateBack({
          delta: 1,
        });
      } else {
        uni.setStorageSync("gsName", this.guanjian);
        uni.navigateBack({
          delta: 1,
        });
      }
    },
    //  go(name) {
    //    uni.setStorageSync('gsName',this.guanjian)
    // uni.navigateBack({
    //   delta: 1,
    // });
    //  },
    sousuo(value) {
      let token = uni.getStorageSync("token");
      const that = this;
      if (!token) {
        uni.showToast({
          title: "请授权登录再操作！",
          duration: 2000,
          icon: "none",
        });
        setTimeout(() => {
          uni.navigateTo({
            url: "/pages/index/index",
          });
        }, 2000);
      } else {
        request({
          url: "h5/home/searchByType?uid=d44428b419f611e983f6fa163e4d6bc3",
          method: "POST",
          header: {
            "content-type": "application/json;charset=UTF-8",
            "api-client": "72e0fee8172411ea995200163e05ff66",
            "api-version": this.globalData.apiVersion,
            "Source-Type": 7,
            token: token,
          },
          data: {
            keywords: value,
            type: 1,
            pageNumber: 1,
            pageSize: 100,
          },
        }).then((res) => {
          if (res.data.code == 200) {
            if (res.data.data) {
              that.data = res.data.data.rows;
            }
            that.you = true;
          } else if (res.data.code == 401) {
            uni.showToast({
              title: "登录失效，请重新授权登录！",
              duration: 2000,
              icon: "none",
            });
            setTimeout(() => {
              uni.navigateTo({
                url: "/pages/index/index",
              });
            }, 2000);
          } else {
            uni.showToast({
              title: res.data.msg,
              duration: 2000,
              icon: "none",
            });
          }
        });
      }
    },
  },
};
</script>

<style lang="less" scoped>
.main {
  height: calc(100vh - 100rpx);
  padding-bottom: 120rpx;
  box-sizing: border-box;
  padding-top: 92rpx;
  .top_tou {
    box-sizing: border-box;
    display: flex;
    padding: 0 38rpx;
    width: 750rpx;
    height: 92rpx;
    background: #f8f8f8;
    line-height: 92rpx;
    justify-content: space-between;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 100;

    .left_ {
      height: 28rpx;
      width: 18rpx;

      image {
        width: 100%;
        height: 100%;
      }
    }

    .center_ {
      font-size: 36rpx;
      font-family: PingFangSC, PingFangSC-Medium;
      font-weight: 500;
      text-align: center;
      color: #111111;
    }

    .right_ {
      width: 18rpx;
    }
  }
}
.quedin {
  width: 100%;
  height: 120rpx;
  position: fixed;
  left: 0;
  bottom: 0;
  border-top: 1rpx solid #eeeeee;
  background-color: #ffffff;
  display: flex;
  justify-content: center;
  align-items: center;
  .btn {
    width: 600rpx;
    height: 80rpx;
    background-color: #0f6ede;
    border-radius: 40rpx;
    color: #ffffff;
    font-size: 32rpx;
    text-align: center;
    line-height: 80rpx;
  }
}
.xian {
  height: 2rpx;
  background-color: #dddddd;
}
.wu_Huo {
  margin-top: 200rpx;
  display: flex;
  flex-direction: column;
  align-items: center;

  image {
    width: 300rpx;
    height: 300rpx;
  }

  text {
    // display: inline-block;
    font-size: 28rpx;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: rgba(136, 136, 136, 1);
    line-height: 37px;
    // position: relative;
  }
}
.content {
  padding: 0 42rpx;
  box-sizing: border-box;
  .seach {
    padding: 37rpx 0;
    display: flex;
    justify-content: space-between;
    border-bottom: 2rpx solid #2168eb;
    input {
      width: 600rpx;
    }
    image {
      width: 29rpx;
      height: 29rpx;
    }
  }
  .seach1 {
    padding: 37rpx 0;
    border-bottom: 1rpx solid #eeeeee;
    font-size: 29rpx;
    font-weight: 400;
    color: #333333;
  }
}
// .bottom {
// 	width: 100%;
// 	height: 150rpx;
// 	background-color: #ffffff;
// 	display: flex;
// 	justify-content: center;
// 	align-items: center;
// 	position: fixed;
// 	bottom: 0;
// 	left: 0;
// 	.save {
// 		width: 686rpx;
// 		height: 80rpx;
// 		background-color: #2168EB;
// 		text-align: center;
// 		line-height: 80rpx;
// 		color: #ffffff;
// 		font-size: 32rpx;
// 		border-radius: 40rpx;
// 		margin: 0 auto;
// 		margin-top: 50rpx;
// 		position: fixed;
// 	}
// }
</style>
